﻿<!DOCTYPE html>
<title>Keyboard Event Polyfill Demo</title>
<meta charset="UTF-8">

<script type="text/javascript" src="../polyfill.js"></script>
<script type="text/javascript" src="../keyboard.js"></script>

<style>
#keyboard {
  font-family: Sans-Serif;
  font-size: 14px;
  width: 1190px; height: 290px;
  background-color: #eeeeee;
}
.section { float: left; margin: 10px;}

.key.meta-win, .key.meta-mac, .key.meta-cros { display: none; }
body.meta-win .key.meta-win,
body.meta-mac .key.meta-mac,
body.meta-cros .key.meta-cros { display: inline-block }

.key, .gap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  width: 40px;
  height: 20px;
  margin: 2px;
  padding: 10px 0px;
  border: solid 2px black;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}
.gap { border-color: transparent; }
.tiny { font-size: 9px; }
.short { height: 15px; padding: 5px 0; }

.Escape, .F1, .F2, .F3, .F4, .F5, .F6, .F7, .F8, .F9, .F10, .F11, .F12 { width: 47px; }
.Tab { width: 60px; }
.Backspace { width: 80px; }
.Backslash { width: 60px; }
.CapsLock, .standard .Enter { width: 87px; }
.Shift { width: 113px; }
.Control, .Meta, .MetaLeft, .MetaRight, .Win, .Meta, .Alt, .ContextMenu { width: 60px; }
.Space { width: 254px; }
.Numpad0 { width: 91px; }
.NumpadAdd, .NumpadEnter { height: 68px; float: right; margin-right: 6px; }

#keyboard sup { font-size: 10px; }
</style>

<body>
<div id="keyboard">

<div class="section standard">
<div>
<span class="key short Escape">Esc</span>
<span class="key short F1">F1</span>
<span class="key short F2">F2</span>
<span class="key short F3">F3</span>
<span class="key short F4">F4</span>
<span class="key short F5">F5</span>
<span class="key short F6">F6</span>
<span class="key short F7">F7</span>
<span class="key short F8">F8</span>
<span class="key short F9">F9</span>
<span class="key short F10">F10</span>
<span class="key short F11">F11</span>
<span class="key short F12">F12</span>
</div>

<div>
<span class="key Backquote">` <sup>~</sup></span>
<span class="key Digit1">1 <sup>!</sup></span>
<span class="key Digit2">2 <sup>@</sup></span>
<span class="key Digit3">3 <sup>#</sup></span>
<span class="key Digit4">4 <sup>$</sup></span>
<span class="key Digit5">5 <sup>%</sup></span>
<span class="key Digit6">6 <sup>^</sup></span>
<span class="key Digit7">7 <sup>&</sup></span>
<span class="key Digit8">8 <sup>*</sup></span>
<span class="key Digit9">9 <sup>(</sup></span>
<span class="key Digit0">0 <sup>)</sup></span>
<span class="key Minus">- <sup>_</sup></span>
<span class="key Equal">= <sup>+</sup></span>
<span class="key Backspace">Backspace</span>
</div>

<div>
<span class="key Tab">Tab</span>
<span class="key KeyQ">Q</span>
<span class="key KeyW">W</span>
<span class="key KeyE">E</span>
<span class="key KeyR">R</span>
<span class="key KeyT">T</span>
<span class="key KeyY">Y</span>
<span class="key KeyU">U</span>
<span class="key KeyI">I</span>
<span class="key KeyO">O</span>
<span class="key KeyP">P</span>
<span class="key BracketLeft">[ <sup>{</sup></span>
<span class="key BracketRight">] <sup>}</sup></span>
<span class="key Backslash">\ <sup>|</sup></span>
</div>

<div>
<span class="key CapsLock">Caps Lock</span>
<span class="key KeyA">A</span>
<span class="key KeyS">S</span>
<span class="key KeyD">D</span>
<span class="key KeyF">F</span>
<span class="key KeyG">G</span>
<span class="key KeyH">H</span>
<span class="key KeyJ">J</span>
<span class="key KeyK">K</span>
<span class="key KeyL">L</span>
<span class="key Semicolon">; <sup>:</sup></span>
<span class="key Quote">' <sup>&quot;</sup></span>
<span class="key Enter">Enter</span>
</div>

<div>
<span class="key Shift ShiftLeft">Shift</span>
<span class="key KeyZ">Z</span>
<span class="key KeyX">X</span>
<span class="key KeyC">C</span>
<span class="key KeyV">V</span>
<span class="key KeyB">B</span>
<span class="key KeyN">N</span>
<span class="key KeyM">M</span>
<span class="key Comma">, <sup>&lt;</sup></span>
<span class="key Period">. <sup>&gt;</sup></span>
<span class="key Slash">/ <sup>?</sup></span>
<span class="key Shift ShiftRight">Shift</span>
</div>

<div>
<span class="key Control ControlLeft">Ctrl</span>
<span class="key MetaLeft meta-win">Win</span>
<span class="key MetaLeft meta-mac">&#x2318;</span>
<span class="key Alt AltLeft">Alt</span>
<span class="key Space">Spacebar</span>
<span class="key Alt AltRight">Alt</span>
<span class="key MetaRight meta-win">Win</span>
<span class="key MetaRight meta-mac">&#x2318;</span>
<span class="key ContextMenu meta-win meta-mac">Menu</span>
<span class="key Control ControlRight">Ctrl</span>
</div>
</div>

<div class="section standard">
<div>
<span class="key short tiny PrintScreen">PrtScr</span>
<span class="key short tiny ScrollLock">Scroll<br>Lock</span>
<span class="key short tiny Pause">Pause<br>Break</span>
</div>

<div>
<span class="key tiny Insert">Ins</span>
<span class="key tiny Home">Home</span>
<span class="key tiny PageUp">Page<br>Up</span>
</div>

<div>
<span class="key tiny Delete">Del</span>
<span class="key tiny End">End</span>
<span class="key tiny PageDown">Page<br>Down</span>
</div>


<div>
<span class="gap"></span>
<br>
<span class="gap"></span>
<span class="key ArrowUp">&uarr;</span>
<span class="gap"></span>
<br>
<span class="key ArrowLeft">&larr;</span>
<span class="key ArrowDown">&darr;</span>
<span class="key ArrowRight">&rarr;</span>
</div>

</div>

<div class="section numpad">
<span class="gap short"></span>
<br>

<span class="key tiny NumLock">Num<br>Lock</span>
<span class="key NumpadDivide">/</span>
<span class="key NumpadMultiply">*</span>
<span class="key NumpadSubtract">-</span>
<br>
<span class="key NumpadAdd">+</span>
<span class="key Numpad7">7</span>
<span class="key Numpad8">8</span>
<span class="key Numpad9">9</span>
<br>
<span class="key Numpad4">4</span>
<span class="key Numpad5">5</span>
<span class="key Numpad6">6</span>
<br>
<span class="key tiny NumpadEnter">Enter</span>
<span class="key Numpad1">1</span>
<span class="key Numpad2">2</span>
<span class="key Numpad3">3</span>
<br>
<span class="key Numpad0">0</span>
<span class="key NumpadDecimal">.</span>
</div>

</div>

<input id="target" style="width: 1px; height: 1px; border: none; position: absolute;">

<br clear=all>
<style>
.event { border: 1px solid black; margin: 10px; padding: 4px; }
</style>
<pre class="event"><span id="eventdata"></span></pre>

<script src="keyboard_test.js"></script>

</body>
